<template>
  <div>
    <DaoHang></DaoHang>
    <div class="sous" v-if="result === true">
      <div class="title">{{ getN }}</div>
      <ZbItem v-for="i in zbArr" :key="i.id" :item="i"></ZbItem>
    </div>
    <div class="title" v-else>暂无招标信息</div>
    <FooterPage></FooterPage>
  </div>
</template>

<script>
import DaoHang from '@/components/daoHang.vue'
import FooterPage from '@/components/foot.vue'
import ZbItem from '@/components/zbItem.vue'
import { getByName } from '@/api/zb'

// 搜索页
export default {
  name: 'SearchIndex',
  data () {
    return {
      result: false,
      zbArr: []
    }
  },
  async created () {
    if (this.getN !== null) {
      const res = await getByName(this.getN)
      if (!res.isSuccess) {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.result = false
      } else {
        this.zbArr = res.data
        this.result = true
      }
    }
  },
  computed: {
    getN () {
      return this.$route.params.n
    }
  },
  components: {
    DaoHang,
    FooterPage,
    ZbItem
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  line-height: 4rem;
  color: #8e3636;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid;
}
.sous {
  border: 1px solid;
  margin-left: 10%;
  width: 80%;
  text-align: center;
  margin-bottom: 2rem;
}
</style>
